<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>04.4提取组件</title>
  <style></style>
</head>

<body>

  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    const author = {
      avatarUrl: '../images/avatar.jpg',
      name: 'shanliangdeYWJ',
      text: '评论1',
      date: new Date()
    }

    function formatDate(fmt, date) {
      let ret;
      let opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    }

    /**
     * @param {object} props
     * @param {object} props.uer            评论者
     * @param {string} props.uer.avatarUrl  图片地址
     * @param {string} props.uer.name       评论者姓名
     */
    function Avatar(props) {
      return (
        <img className="Avatar"
          src={props.user.avatarUrl}
          alt={props.user.name}
        />
      );
    }

    function UserInfo(props) {
      return (
        <div className="UserInfo">
          <Avatar user={props.user} />
          <div className="UserInfo-name">
            {props.user.name}
          </div>
        </div>
      );
    }

    function Comment(props) {
      return (
        <div className="Comment">
          <UserInfo user={props.author} />
          <div className="Comment-text">
            {props.text}
          </div>
          <div className="Comment-date">
            {formatDate("YYYY-mm-dd HH:MM", props.date)}
          </div>
        </div>
      );
    }

    function App() {
      return (
        <div>
          <Comment author={author} text={author.text} date={author.date} />
        </div>
      );
    }

    ReactDOM.render(
      <div>
        <App />
      </div>
      , document.getElementById('root')
    );


  </script>
</body>

</html>